<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<nav>
    <div>
        <ul>
            <li><span>北京</span> <a href="#" id="qie">[切换城市]</a> |</li>
            <li> <a class="a1" href="#">同城帮首页</a></li>
            <li><a href="#">登陆</a> |</li>
            <li> <a href="#">注册</a> |</li>
            <li> <a href="#">我的订单</a> |</li>
            <li> <a href="#">在线客服</a><span>(9:00-21:00)</span> |</li>
            <li> <select>
                <option>客户服务</option>
                <option>帮助中心</option>
                <option>维修付款</option>
                </select> |
            </li>
            <li> <a href="#">论坛</a> |</li>
            <li><a class="a2" href="#">投诉建议</a></li>
        </ul>
    </div>

</nav>
   <div class="box">
       <div class="ding" id="ding">
           <div class="d1">
               <span>城市列表</span>
               <a href="#" id="guan">关闭 X</a>
           </div>
           <div class="d2">
               <p> &nbsp;&nbsp;<span>热门</span> &nbsp;&nbsp;<a href="#">北京</a> <a href="#"> &nbsp;&nbsp;上海</a>&nbsp;&nbsp;<a href="#">广州</a>&nbsp;&nbsp;<a href="#">天津</a>&nbsp;&nbsp;<a href="#">西安</a>&nbsp;&nbsp;<a href="#">深圳</a>&nbsp;&nbsp;<a href="#">武汉</a>&nbsp;&nbsp;<a href="#">成都</a>&nbsp;&nbsp;<a href="#">重庆</a></p>
               <p class="p1">&nbsp;&nbsp;<a href="#">南京</a> <a href="#">&nbsp;&nbsp;沈阳</a>&nbsp;&nbsp;<a href="#">杭州</a>&nbsp;&nbsp;<a href="#">济南</a>&nbsp;&nbsp;<a href="#">郑州</a>&nbsp;&nbsp;<a href="#">青岛</a>&nbsp;&nbsp;<a href="#">苏州</a></p>
           </div>
       </div>
       <section class="se1">
           <div> <img src="img/7.png"></div>
           <ul>
               <li><a href="#">二手优品</a></li>
               <li><a href="#">手机回收</a></li>
               <li><a href="#">手机维修</a></li>
               <li><a href="#">电脑维修</a></li>
               <li><a href="#">以旧换新</a></li>
               <li><a href="#">手机租用</a></li>
           </ul>
           <img class="img1" src="img/11.png">
       </section>
       <section class="se2">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
               </ol>

               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="img/1.jpg" alt="...">

                   </div>
                   <div class="item">
                       <img src="img/2.jpg" alt="...">

                   </div>
                   <div class="item">
                       <img src="img/3.png" alt="...">

                   </div>

               </div>

           </div>
           <div class="div2">
               <ul>
                   <li><span>修手机/Pad</span></li>
                   <li><span>修电脑</span></li>
                   <li><span>卖手机/电脑</span></li>
                   <li><span>买二手机</span></li>
               </ul>
           </div>
       </section>
       <section class="se3">
           <img src="img/4.jpg">
           <img src="img/14.jpg">
           <img src="img/4.jpg">
           <img src="img/14.jpg">
       </section>
       <section class="se4">
             <span>热门手机回收</span> <a href="#">查看更多</a>
       </section>
       <section class="se5">
           <img src="img/4_03.png" alt="">
           <img src="img/1-1.png" alt="">
           <img src="img/1-2.png" alt="">
           <img src="img/1-3.png" alt="">
           <img src="img/1-4.png" alt="">
           <img src="img/1-5.png" alt="">
       </section>
       <section class="se4">
           <span>优品精选</span> <a href="#">查看更多</a>
       </section>
       <section class="se5">
           <img src="img/4_06.png" alt="">
           <img src="img/1-6.png" alt="">
           <img src="img/1-7.png" alt="">
           <img src="img/1-8.png" alt="">
           <img src="img/1-9.png" alt="">
           <img src="img/1-5.png" alt="">
       </section>
       <section class="se4">
           <span>到店维修</span>
       </section>
       <section class="se6">
                <select><option>北京</option></select>
                <select><option>选取区县</option></select>
                <input type="text" placeholder=" 输入您的位置查找附近商家"><button>搜索</button>
       </section>
       <section class="se7">
           <div class="left">
               <div class="div3">
                   <button>默认排序</button>
                   <button>按成提交</button>
                   <button>按人气</button>
                   <span><input type="checkbox">先行赔款</span>
                   <div class="ditu">
                       <img src="img/13.png"><div>地图模式</div>
                   </div>
               </div>
               <div class="div4">
                   <ul>
                       <li class="li3">
                           <div><img src="img/24.jpg"></div>
                           <div class="div6">
                               <ul>
                                   <li><span>顺通电脑维修</span> 店铺等级：￥￥￥</li>
                                   <li>主营：电脑维修，电脑周边配件，系统维护，网络安全，打印...</li>
                                   <li>地址：北京通州区瑞都国际南区12号楼底商12-2</li>
                               </ul>
                           </div>
                           <div class="div7">
                               <ul>
                                   <li>￥ 先行赔款</li>
                                   <li>V同城帮认证</li>
                                   <li>人气：122330</li>
                               </ul>
                           </div>
                           <button>进入店铺</button>

                       </li>
                       <li class="li3">
                           <div><img src="img/55.jpg"></div>
                           <div class="div6">
                               <ul>
                                   <li><span>顺通电脑维修</span> 店铺等级：￥￥￥</li>
                                   <li>主营：电脑维修，电脑周边配件，系统维护，网络安全，打印...</li>
                                   <li>地址：北京通州区瑞都国际南区12号楼底商12-2</li>
                               </ul>
                           </div>
                           <div class="div7">
                               <ul>
                                   <li>￥ 先行赔款</li>
                                   <li>V同城帮认证</li>
                                   <li>人气：122330</li>
                               </ul>
                           </div>
                           <button>进入店铺</button>
                       </li>
                       <li class="li3">
                           <div><img src="img/56.jpg"></div>
                           <div class="div6">
                               <ul>
                                   <li><span>顺通电脑维修</span> 店铺等级：￥￥￥</li>
                                   <li>主营：电脑维修，电脑周边配件，系统维护，网络安全，打印...</li>
                                   <li>地址：北京通州区瑞都国际南区12号楼底商12-2</li>
                               </ul>
                           </div>
                           <div class="div7">
                               <ul>
                                   <li>￥ 先行赔款</li>
                                   <li>V同城帮认证</li>
                                   <li>人气：122330</li>
                               </ul>
                           </div>
                           <button>进入店铺</button>
                       </li>
                       <li class="li3">
                           <div><img src="img/57.gif"></div>
                           <div class="div6">
                               <ul>
                                   <li><span>顺通电脑维修</span> 店铺等级：￥￥￥</li>
                                   <li>主营：电脑维修，电脑周边配件，系统维护，网络安全，打印...</li>
                                   <li>地址：北京通州区瑞都国际南区12号楼底商12-2</li>
                               </ul>
                           </div>
                           <div class="div7">
                               <ul>
                                   <li>￥ 先行赔款</li>
                                   <li>V同城帮认证</li>
                                   <li>人气：122330</li>
                               </ul>
                           </div>
                           <button>进入店铺</button>
                       </li>
                       <li class="li3">
                           <div><img src="img/59.jpg"></div>
                           <div class="div6">
                               <ul>
                                   <li><span>顺通电脑维修</span> 店铺等级：￥￥￥</li>
                                   <li>主营：电脑维修，电脑周边配件，系统维护，网络安全，打印...</li>
                                   <li>地址：北京通州区瑞都国际南区12号楼底商12-2</li>
                               </ul>
                           </div>
                           <div class="div7">
                               <ul>
                                   <li>￥ 先行赔款</li>
                                   <li>V同城帮认证</li>
                                   <li>人气：122330</li>
                               </ul>
                           </div>
                           <button>进入店铺</button>
                       </li>
                   </ul>
               </div>

           </div>
           <div class="right">
               <p>商家好评棒</p>

                   <ul>
                       <li class="li8">
                           <div class="div8">1</div>
                           <img class="img8" src="img/55.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8">
                           <div class="div8">2</div>
                           <img class="img8" src="img/56.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8">
                           <div class="div8">3</div>
                           <img class="img8" src="img/59.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8">
                           <div class="div8 hh">4</div>
                           <img class="img8" src="img/57.gif">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8 ">
                           <div class="div8 hh">5</div>
                           <img class="img8" src="img/55.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8 ">
                           <div class="div8 hh">6</div>
                           <img class="img8" src="img/56.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                       <li class="li8">
                           <div class="div8 hh">7</div>
                           <img class="img8" src="img/24.jpg">
                           <div class="div9">
                               <ul>
                                   <li><span class="p5">炼金成维修中心</span></li>
                                   <li><span>1232132条评论</span></li>
                               </ul>
                           </div>
                       </li>
                   </ul>

           </div>
       </section>
       <section class="se8">
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
           <span>6</span>
           <span>7</span>
           <span>8</span>
           <span>9</span>
           <span>10</span>
           <span class="span8">下一页>></span>
       </section>
       <section class="se9">
           <div class="div12">
               <div>
                   <img src="img/18.jpg">
                   <ul>
                       <li><span>购物指南</span></li>
                       <li>购物流程</li>
                       <li>帮助文档</li>
                   </ul>
               </div>
               <div>
                   <img src="img/19.jpg">
                   <ul>
                       <li><span>购物指南</span></li>
                       <li>购物流程</li>
                       <li>帮助文档</li>
                   </ul>
               </div>
               <div>
                   <img src="img/20.jpg">
                   <ul>
                       <li><span>购物指南</span></li>
                       <li>购物流程</li>
                       <li>帮助文档</li>
                   </ul>
               </div>
               <div>
                   <img src="img/21.jpg">
                   <ul>
                       <li><span>购物指南</span></li>
                       <li>购物流程</li>
                       <li>帮助文档</li>
                   </ul>
               </div>
           </div>
           <div class="div13"></div>
       </section>
       <section class="se10">
           <p><span>客服电话：40000-399-360 、 010-53767360</span> <span>投诉建议</span> <span>网站地图</span></p>
           <p><span>Copyright © 2005-2017  360.CN  All Rights Reserved  360安全中心</span></p>
           <p><span>京ICP备08010314号-19    京公网安备110000000006号</span></p>
       </section>
       <section>
           <div class="div21">
               <ul>
                   <li><img src="img/8.png"></li>
                   <li><button>在线咨询</button> </li>
                   <li><span>9:00-21:00</span></li>
                   <li><img src="img/10.jpg"> </li>
                   <li>
                       <p>同城帮服务</p>
                       <p>（bangtc）</p>
                   </li>
               </ul>
           </div>
       </section>


   </div>
</body>
<script type="text/javascript">
    //  点击切换城市 显示div
    qie.onclick = function(){
        ding.style.display = "block"
    };

    //  点击关闭 隐藏div
    guan.onclick = function(){
        ding.style.display = "none"
    }
</script>
</html>